<template>
  <div>
  <el-card> 
  <div class="fishbone-container">
    <svg :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg" class="fishbone-svg">
      <!-- 红色虚线椭圆外框 -->
      <ellipse
        cx="50%"
        cy="50%"
        rx="350"
        ry="140"
        fill="none"
        stroke="red"
        stroke-width="2"
        stroke-dasharray="6,6"
      />

      <!-- 主流程箭头 -->
      <g v-for="(step, i) in processSteps" :key="i">
        <!-- 箭头形状 -->
        <path
          :d="getArrowPath(i)"
          fill="#B0D7F5"
          stroke="#000"
          stroke-width="1"
        />
        <!-- 流程文本 -->
        <text
          :x="arrowX[i] + 30"
          :y="centerY + 10"
          font-size="12"
          text-anchor="middle"
          fill="#000"
          font-family="sans-serif"
        >{{ step.name }}</text>

        <!-- 红色连接点 -->
        <circle
          :cx="arrowX[i] + 90"
          :cy="centerY"
          r="4"
          fill="red"
        />
      </g>

      <!-- 上方因素 -->
      <g v-for="(factor, i) in upperFactors" :key="'upper-' + i">
        <circle
          :cx="factor.x"
          :cy="factor.y"
          r="25"
          :fill="factor.color"
          stroke="#000"
          stroke-width="1"
        />
        <text
          :x="factor.x"
          :y="factor.y + 5"
          text-anchor="middle"
          font-size="10"
          fill="#000"
          font-family="sans-serif"
        >{{ factor.name }}</text>

        <!-- 连接线 -->
        <line
          :x1="factor.x"
          :y1="factor.y"
          :x2="factor.targetX"
          :y2="centerY"
          stroke="#888"
          stroke-width="1"
          stroke-dasharray="4,4"
        />

        <!-- 分原因标签 -->
        <text
          :x="factor.targetX"
          :y="centerY - 35"
          font-size="10"
          fill="#888"
          font-family="sans-serif"
          text-anchor="start"
        >分原因</text>
      </g>

      <!-- 下方因素 -->
      <g v-for="(factor, i) in lowerFactors" :key="'lower-' + i">
        <circle
          :cx="factor.x"
          :cy="factor.y"
          r="25"
          :fill="factor.color"
          stroke="#000"
          stroke-width="1"
        />
        <text
          :x="factor.x"
          :y="factor.y + 5"
          text-anchor="middle"
          font-size="10"
          fill="#000"
          font-family="sans-serif"
        >{{ factor.name }}</text>

        <!-- 连接线 -->
        <line
          :x1="factor.x"
          :y1="factor.y"
          :x2="factor.targetX"
          :y2="centerY"
          stroke="#888"
          stroke-width="1"
          stroke-dasharray="4,4"
        />

        <!-- 分原因标签 -->
        <text
          :x="factor.targetX"
          :y="centerY + 45"
          font-size="10"
          fill="#888"
          font-family="sans-serif"
          text-anchor="start"
        >分原因</text>
      </g>
    </svg>
  </div>
  </el-card>
  </div>

</template>

<script setup>
import { computed } from 'vue'

// Props
const props = defineProps({
  processSteps: {
    type: Array,
    default: () => [
      { name: '流程一' },
      { name: '流程二' },
      { name: '流程三' },
      { name: '流程四' },
      { name: '流程五' },
      { name: '流程六' },
      { name: '流程七' },
      { name: '流程八' }
    ]
  },
  upperFactors: {
    type: Array,
    default: () => [
      { name: '因素一', x: 100, y: 80, targetX: 130, color: '#FFB6C1' }, // 粉红
      { name: '因素二', x: 180, y: 60, targetX: 210, color: '#FFB6C1' },
      { name: '因素三', x: 260, y: 80, targetX: 290, color: '#FFB6C1' },
      { name: '因素四', x: 340, y: 60, targetX: 370, color: '#FFB6C1' },
      { name: '因素五', x: 420, y: 80, targetX: 450, color: '#FFB6C1' },
      { name: '因素六', x: 500, y: 60, targetX: 530, color: '#FFE4B5' }, // 米黄
      { name: '因素七', x: 580, y: 80, targetX: 610, color: '#B2FFFC' }  // 蓝绿
    ]
  },
  lowerFactors: {
    type: Array,
    default: () => [
      { name: '因素一', x: 100, y: 280, targetX: 130, color: '#FFB6C1' },
      { name: '因素二', x: 180, y: 300, targetX: 210, color: '#FFB6C1' },
      { name: '因素三', x: 260, y: 280, targetX: 290, color: '#FFB6C1' },
      { name: '因素四', x: 340, y: 300, targetX: 370, color: '#FFB6C1' },
      { name: '因素五', x: 420, y: 280, targetX: 450, color: '#FFB6C1' },
      { name: '因素六', x: 500, y: 300, targetX: 530, color: '#B2FFFC' },
      { name: '因素七', x: 580, y: 280, targetX: 610, color: '#B2FFFC' }
    ]
  }
})

// 尺寸配置
const width = 800
const height = 400
const centerY = height / 2
const startX = 80
const spacing = 100

// 计算每个流程的起始 x 坐标
const arrowX = computed(() => {
  return props.processSteps.map((_, i) => startX + i * spacing)
})

// 获取箭头路径
const getArrowPath = (index) => {
  const x = arrowX.value[index]
  const y = centerY - 10
  const w = 30
  const h = 20
  return `M${x},${y}
          H${x + w - 12}
          L${x + w},${centerY}
          L${x + w - 12},${y + h}
          H${x}
          Z`
}
</script>

<style scoped>
.fishbone-container {
  /* background-color: #fff;
  border: 1px solid #ddd; */
  border-radius: 8px;
  overflow: auto;
}

.fishbone-svg {
  width: 100%;
  height: auto;
  display: block;
}
</style>